<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

const goToIndex = () => router.push("/index");
const goToOrderList = () => router.push("/orderList");

</script>

<template>
  <div class="wrapper">
    <!--    底部菜单栏-->
    <ul class="footer">
      <li @click="goToIndex">
        <i class="iconfont icon-shouye" style="font-size: 4vw"></i>
        <P>首页</P>
      </li>
      <li>
        <i class="iconfont icon-faxian" style="font-size: 4vw"></i>
        <P>发现</P>
      </li>
      <li @click="goToOrderList">
        <i class="iconfont icon-dingdan" style="font-size: 4vw"></i>
        <P>订单</P>
      </li>
      <li>
        <i class="iconfont icon-wode" style="font-size: 4vw"></i>
        <P>我的</P>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="less">

@import url('../assets/font/font_dibu/iconfont.css');

/*********底部菜单栏**********/
.wrapper .footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #ddd;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li{
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor:pointer;
}

.wrapper .footer li p{
  font-size: 3vw;
}

</style>